<template>
    <div>
        <div class="activity-right">
            <h3>活动列表</h3>
            <el-select style="width:400px" @change="handlChangeStatus" v-model="form.status" placeholder="选择活动状态">
                <el-option v-for="item in position" :key="item.label" :label="item.value" :value="item.label">
                </el-option>
            </el-select>
            <el-input style="width:25%;" class='input' @keyup.enter.native="search" prefix-icon="el-icon-search" clearable v-model="name"  placeholder="请输入活动名称"></el-input>
            <el-button type="primary" @click.enter="search" icon="el-icon-search">搜索</el-button>
            <el-button class='right' style="margin-bottom:20px;" type="primary" @click="addActivity"> 添加活动 </el-button>
            <el-table class="table-common" :data="tableData" element-loading-text="拼命加载中" style="width: 100%">
                <el-table-column prop="imgUrl" label="活动图片" width="150" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgUrl" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="活动名称" width="100">
                </el-table-column>
                <el-table-column prop="id" label="活动id" width="100">
                </el-table-column>
                <el-table-column prop="sort" label="活动排序" width="100">
                </el-table-column>
                <el-table-column prop="status" label="活动状态" width="100">
                    <template slot-scope="scope">{{scope.row.status==0 ? '展示' : (scope.row.status==1 ? '售卖中' : '结束')}}</template>
                </el-table-column>
                <el-table-column prop="startTime" label="活动时间" width="180">
                    <template slot-scope="scope">{{'开始: ' + $formate(scope.row.startTime,'yyyy-MM-dd hh:mm:ss')}}<br/>{{'结束: ' + $formate(scope.row.endTime,'yyyy-MM-dd hh:mm:ss')}}</template>
                </el-table-column>
               <el-table-column  label="活动运费" width="150">
                    <template slot-scope="scope">{{'一类地区: ' + (scope.row.areaTypeOnePostage != null && scope.row.areaTypeOnePostage != 0? scope.row.areaTypeOnePostage : '0') }}
                        <br/>{{'二类地区: ' + (scope.row.areaTypeTwoPostage != null && scope.row.areaTypeTwoPostage != 0 ? scope.row.areaTypeTwoPostage : '0') }}<br/>
                        <span v-if="scope.row.isFreeShippingAmount == 1">{{'满额包邮: ' + scope.row.freeShippingAmount  + '包邮' }}</span><br/>
                        <span v-if="scope.row.isFreeShippingPiece == 1">{{'满件包邮: ' +  scope.row.freeShippingPiece + '包邮' }}</span></template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editActivity(scope.row)" size="small">编辑</el-button>
                        <el-button type="text" @click="checkActivityGods(scope.row.id)" size="small">活动商品</el-button>
                        <el-button type="text" @click="setPostage(scope.row)" size="small">运费</el-button>
                    </template>
                </el-table-column>
            </el-table>
             <div class="aaa" v-if='isShow' style="position:fixed; top:0;bottom:-60px;left:-60px;right:-60px;background:#999;opacity:.4;z-index:22;"></div>
            <div class="popup-detail storeCode" v-if = "isShow" style="position:fixed; top:300px;height:600px">
                    <el-form ref="form" :model="formData" style="margin: 0 auto" >
                        <el-form-item label="会场运费:" >
                            <el-form-item label="一类地区:"  label-width="100px" style="margin:60px 0 20px 0;">
                                <el-input style="width:400px; " v-model="formData.areaTypeOnePostage" type="text" placeholder="请输入会场运费" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="二类地区:" style="margin:10px 0;" label-width="100px">
                                <el-input style="width:400px"  v-model="formData.areaTypeTwoPostage" type="text" placeholder="请输入会场运费" clearable></el-input>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="会场包邮:" prop="postage">
                            <template>
                                <el-checkbox v-model="formData.isFreeShippingAmount" style="margin:10px 0;">
                                    满额包邮:
                                    <el-input v-if="formData.isFreeShippingAmount"  style="width:400px;margin-left:12px;" v-model="formData.freeShippingAmount" type="text" placeholder="输入满运费门栏" clearable></el-input>
                                    <el-input v-else disabled style="width:400px;margin-left:12px;" v-model="formData.freeShippingAmount" type="text" placeholder="输入满运费门栏" clearable></el-input>
                                </el-checkbox>
                                <br/>
                                <el-checkbox v-model="formData.isFreeShippingPiece" style="margin:10px 0;">
                                    满件包邮:
                                    <el-input v-if="formData.isFreeShippingPiece" style="width:400px; margin-left:12px;"  v-model="formData.freeShippingPiece" type="text" placeholder="输入满运费门栏" clearable></el-input>
                                    <el-input v-else disabled style="width:400px; margin-left:12px;"  v-model="formData.freeShippingPiece" type="text" placeholder="输入满运费门栏" clearable></el-input>
                                </el-checkbox>
                            </template>
                        </el-form-item>
                      
                        <el-form-item class='right-btn' style="text-align:center; margin-top:60px;">
                            <el-button type="primary" size="small" style="width:100px" @click="submitPostage()">确认</el-button>
                            <!-- <el-button type="primary"  size="small" @click="noRecord()">取消</el-button> -->
                        </el-form-item>
                        <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>
                    </el-form>
                </div>
            
            <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
        </div>
    </div>
</template>

<script>
import { activityList, editActivityPostage, getActivityPostageByActivityId } from "../../data/postData";
export default {
    mounted() {
        let { page,status,name } = this.$store.state.activity;
       // this.page = this.$store.state.activity.page;
        this.form.status = status;
        this.name = name
        this.getActivityList(this.page);
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            tableData: null,
            total: null,
            size: 10,
            page: this.$store.state.activity.page,
            name: "",
            form: {
                status: "1"
            },
            isShow: false,
            formData: {
                areaTypeOnePostage: '',
                areaTypeTwoPostage: '',
                isFreeShippingAmount: false,
                isFreeShippingPiece: false,
                freeShippingAmount: '',
                freeShippingPiece: ''
            },
            position: [
                {
                    label: "",
                    value: "全部"
                },
                {
                    label: "0",
                    value: "展示中"
                },
                {
                    label: "1",
                    value: "售卖中"
                },
                {
                    label: "2",
                    value: "结束"
                }
            ]
        };
    },
    methods: {
        //选择不同状态活动
        handlChangeStatus() {
            this.page = 1;
            this.$store.dispatch("saveActivityListPage", 1);
            this.$store.dispatch("saveActivityListStatus", this.form.status);
            this.getActivityList(this.page);
        },
        //获取活动列表
        getActivityList(page) {
            var params = {
                data: {
                    page: page,
                    size: "10",
                    storeNo: this.user.storeNo,
                    status: this.form.status,
                    name: this.name
                }
            };
            console.log(params);
            this.$fetch.post(activityList, params).then(res => {
                this.tableData = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning",
                    duration: 1000
                });
            });
        },
        search(){
            this.$store.dispatch("saveActivityListName", this.name);
            this.getActivityList(this.page)
        },
        addActivity() {
            this.$router.push({ path: "/addActivity" });
        },
        editActivity(scope) {
            this.$router.push({ path: "/editActivity/" + scope.id });
        },
        checkActivityGods(id) {
            this.$router.push({ path: "/activityGodsList/" + id });
            this.$store.dispatch("saveActivityGoodsListPage", 1);
            this.$store.dispatch("saveActivityGoodsListName", '');
        },
        handlePageChange(val) {
            this.page = val;
            this.getActivityList(this.page);
            this.$store.dispatch("saveActivityListPage", this.page);
        },
        //设置活动运费
        setPostage(scope){
            this.isShow = true
            this.formData.activityId = scope.id
            if(this.formData.isFreeShippingAmount ==null){
                this.formData.isFreeShippingAmount = 0
            }
            if(this.formData.isFreeShippingPiece == null){
                this.formData.isFreeShippingPiece = 0
            }
            var params = {
                "data" : {
                    "activityId": + scope.id
                }
            }
            this.$fetch.post(getActivityPostageByActivityId, params).then(res => {
                if(res.data != null){
                    this.formData = res.data
                    this.formData.isFreeShippingAmount = res.data.isFreeShippingAmount === 0 ? false : true
                    this.formData.isFreeShippingPiece = res.data.isFreeShippingPiece === 0 ? false : true
                }else{
                    this.formData = this.formData
                    this.formData.areaTypeOnePostage = 0
                    this.formData.areaTypeTwoPostage = 0
                    this.formData.freeShippingAmount = ''
                    this.formData.freeShippingPiece = ''
                    this.formData.isFreeShippingAmount = false
                    this.formData.isFreeShippingPiece = false
                }

                
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'error',
                    duration: 1000
                })
            })
        },
        close(){
            this.isShow = false
          
        },
        submitPostage(){
            if(!this.formData.isFreeShippingAmount){
                this.formData.freeShippingAmount = null
            }
            if(!this.formData.isFreeShippingPiece){
                this.formData.freeShippingPiece = null
            }
            if(this.formData.isFreeShippingAmount ==null){
                this.formData.isFreeShippingAmount = 0
            }
            if(this.formData.isFreeShippingPiece == null){
                this.formData.isFreeShippingPiece = 0
            }
            var params = {
                "data" : {
                    "activityId": + this.formData.activityId,
                    "areaTypeOnePostage": + this.formData.areaTypeOnePostage,
                    "areaTypeTwoPostage": + this.formData.areaTypeTwoPostage,
                    "isFreeShippingAmount": this.formData.isFreeShippingAmount === true ? 1 : 0,
                    "isFreeShippingPiece": this.formData.isFreeShippingPiece === true ? 1 : 0,
                    "freeShippingAmount":  this.formData.freeShippingAmount,
                    "freeShippingPiece":  this.formData.freeShippingPiece
                }
            }
            console.log(params, 'params--------')
            this.$fetch.post(editActivityPostage, params).then(res => {
                this.$message({
                    message: res.message,
                    type: 'success',
                    duration: 1000
                })
                setTimeout(() =>{
                    this.isShow = false
                    this.getActivityList(this.page);
                },1200)
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning',
                    duration: 1000
                })
            })
        }
    }
};
</script>

<style scoped lang="less">
.activity-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 60%;
    }
    a {
        color: #409eff;
    }

}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.storeCode {
   height:100%;
   margin-top:50px;
   box-sizing: border-box;
   padding:30px 100px;
}
</style>